<style lang="less" scoped src="../public.less"></style>
<template>
    <div>
        <div class="main-table" style="font-size: 15px;">
            <h3>日期统计</h3>
            <div style="margin-top: 10px;">
                <Row>
                    <Col span="24">
                        订单日期：<span><DatePicker v-model="queryDataDate.dateTime" :clearable="true"  style="width: 200px" ></DatePicker></span>
                        所属校区：<Select v-model="queryDataDate.areaId"  style="width: 200px;">
                        <Option v-for="item in areaList" :value="item.id" >{{item.name}}</Option>
                    </Select>
                        <Button type="primary" @click="doQueryDaliy">查询</Button>
                    </Col>
                </Row>
            </div>
            <div class="main-table">
                <Table border :columns="columnsDate" :data="dataListDate" :highlight-row="true"></Table>
                <div style="margin-top: 10px;display: flex">
                    <h3 style="color: red">{{datetimeDaily}}</h3> <h3 style="margin-left: 5px">实收合计：<span style="color:red;">{{totalAmtDaily}}元</span></h3> <h3 style="margin-left: 5px">打折合计：<span style="color:red;">{{totalDiscountAmtDaily}}元</span></h3><h3 style="margin-left: 5px;">退费合计：<span style="color:red;">{{totalRefundAmtDaily}}元</span></h3>
                </div>
            </div>
            <div class="pagination">
                <Page border :total="totalDate" size="small" :page-size="pageSizeDate" :current.sync="pageIndexDate" @on-change="doQueryDaliy"
                      show-total show-elevator></Page>
            </div>
        </div>
        <div class="main-table" style="font-size: 15px;">
            <h3>月份统计</h3>
            <div style="margin-top: 10px;">
                <Row>
                    <Col span="24">
                        订单月份：<span><DatePicker type="month" v-model="queryDataMonth.time" :clearable="true"  style="width: 200px"></DatePicker></span>
                        所属校区：<Select v-model="queryDataMonth.areaId"  style="width: 200px;">
                        <Option v-for="item in areaList" :value="item.id" >{{item.name}}</Option>
                    </Select>
                        <Button type="primary" @click="doQueryMonth">查询</Button>
                    </Col>
                </Row>
            </div>
            <div class="main-table">
                <Table border :columns="columnsMonth" :data="dataListMonth" :highlight-row="true"></Table>
                <div style="margin-top: 10px;display: flex">
                    <h3 style="color: red;">{{datetimeMonth}}</h3>  <h3 style="margin-left: 5px">实收合计：<span style="color:red;">{{totalAmtMonth}}元</span></h3> <h3 style="margin-left: 5px;">打折合计：<span style="color:red;">{{totalDiscountAmtMonth}}元</span></h3><h3 style="margin-left: 5px;">退费合计：<span style="color:red;">{{totalRefundAmtMonth}}元</span></h3>
                </div>
            </div>
            <div class="pagination">
                <Page border :total="totalMonth" size="small" :page-size="pageSizeMonth" :current.sync="pageIndexMonth" @on-change="doQueryMonth"
                      show-total show-elevator></Page>
            </div>
        </div>
    </div>
</template>

<script>
    import util from '@/libs/util';
    import utilDate from '@/util/getDate';
    import regs from '../../util/formReg';
    export default {
        name: 'activitystatistics',
        data () {
            return {
                columnsDate: [{
                    title: '订单号',
                    key: 'p_code'
                }, {
                    title: '活动名称',
                    key: 'activityName'
                }, {
                    title: '学生姓名',
                    key: 'studentName'
                }, {
                    title: '所属校区',
                    key: 'areaName'
                }, {
                    title: '订单金额',
                    key: 'totalAmt'
                }, {
                    title: '退费金额',
                    key: 'refundAmt'
                }, {
                    title: '打折金额',
                    key: 'discountAmt'
                }, {
                    title: '实收金额',
                    key: 'realAmt'
                }, {
                    title: '订单支付时间',
                    key: 'chargeTime',
                    render: (h, params) => {
                        return h('span', {}, utilDate.getDate(params.row.chargeTime, 'time'));
                    }
                }],
                columnsMonth: [{
                    title: '日期',
                    key: 'chargeTime',
                    render: (h, params) => {
                        return h('span', {}, utilDate.getDate(params.row.chargeTime, 'date'));
                    }
                }, {
                    title: '订单金额',
                    key: 'totalAmt'
                }, {
                    title: '打折金额',
                    key: 'discountAmt'
                }, {
                    title: '退费金额',
                    key: 'refundAmt'
                }, {
                    title: '实际金额',
                    key: 'realAmt'
                }],
                dataListMonth: [],
                dataListDate: [],

                totalMonth: 0,
                pageSizeMonth: 10,
                pageIndexMonth: 1,
                queryDataMonth: {},
                totalAmtMonth: 0,
                totalRefundAmtMonth: 0,
                totalDiscountAmtMonth: 0,
                datetimeMonth: '',

                totalDate: 0,
                pageSizeDate: 10,
                pageIndexDate: 1,
                queryDataDate: {},
                totalAmtDaily: 0,
                totalRefundAmtDaily: 0,
                totalDiscountAmtDaily: 0,
                datetimeDaily: '',
                areaList:[]
            };
        },
        mounted: function () {
            this.init();
        },
        methods: {
            init: function () {
                util.ajax.post('/base/datadictionary/findByCode', util.toFormData(// 获得区域
                    {CODE: 'AREA_TYPE'}
                )).then(res => {
                    if (res.data.code == 200) {
                        var data = res.data.data;
                        this.areaList = data;
                    } else {
                        this.$Message.error(res.data.message);
                    }
                });

                this.doQueryDaliy();
                this.doQueryMonth();
            },
            doQueryDaliy: function () {
                let queryData = this.queryDataDate;
                queryData.page = this.pageIndexDate;
                queryData.size = this.pageSizeDate;
                util.ajax.post('/busine/activity/bill/statisticsByDate', util.toFormData(queryData
                )).then(res => { // 获得区域数据
                    if (res.data.code == 200) {
                        let data = res.data.data.list;
                        let total = res.data.data.total;
                        this.dataListDate = data;
                        this.totalDate = total;
                    } else {
                        this.$Message.error(res.data.message);
                    }
                });

                util.ajax.post('/busine/activity/bill/statisticsAllByDate', util.toFormData(queryData
                )).then(res => {
                    if (res.data.code == 200) {
                        let data = res.data.data;
                        if (regs.isNotEmpty(data)) {
                            this.totalAmtDaily = data.realAmt;
                            this.totalDiscountAmtDaily = data.discountAmt;
                            this.totalRefundAmtDaily = data.refundAmt;
                            let datetime = this.queryDataDate.dateTime;
                            if (regs.isNotEmpty(datetime)) {
                                this.datetimeDaily = utilDate.getDate(data.datetime, 'date');
                            } else {
                                this.datetimeDaily = '截止到目前';
                            }
                        } else {
                            this.datetimeDaily = utilDate.getDate(this.queryDataDate.dateTime, 'date');
                            this.totalAmtDaily = 0;
                            this.totalDiscountAmtDaily = 0;
                            this.totalRefundAmtDaily = 0;
                        }
                    } else {
                        this.$Message.error(res.data.mesaage);
                    }
                });
            },
            doQueryMonth: function () {
                let queryData = this.queryDataMonth;
                let time = this.queryDataMonth.time;
                if (regs.isNotEmpty(time)) {
                    queryData.year = time.getFullYear();
                    queryData.month = time.getMonth() + 1;
                } else {
                    queryData.year = '';
                    queryData.month = '';
                }
                queryData.page = this.pageIndexMonth;
                queryData.size = this.pageSizeMonth;
                util.ajax.post('/busine/activity/bill/statisticsByMonth', util.toFormData(queryData
                )).then(res => {
                    if (res.data.code == 200) {
                        let data = res.data.data.list;
                        let total = res.data.data.total;
                        this.dataListMonth = data;
                        this.totalMonth = total;
                    } else {
                        this.$Message.error(res.data.message);
                    }
                });

                util.ajax.post('/busine/activity/bill/statisticsAllByMonth', util.toFormData(queryData
                )).then(res => {
                    if (res.data.code == 200) {
                        let data = res.data.data;
                        if (regs.isNotEmpty(data)) {
                            this.totalAmtMonth = data.realAmt;
                            this.totalDiscountAmtMonth = data.discountAmt;
                            this.totalRefundAmtMonth = data.refundAmt;
                            let datetime = this.queryDataMonth.month;
                            if (regs.isNotEmpty(datetime)) {
                                this.datetimeMonth = utilDate.getDate(data.datetime, 'date');
                            } else {
                                this.datetimeMonth = '截止到目前';
                            }
                        } else {
                            this.datetimeMonth = utilDate.getDate(this.queryDataMonth.time, 'date');
                            this.totalAmtMonth = 0;
                            this.totalDiscountAmtMonth = 0;
                            this.totalRefundAmtMonth = 0;
                        }
                    } else {
                        this.$Message.error(res.data.mesaage);
                    }
                });
            }
        }
    };
</script>
